ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.phones{
    width: 1000px;
    margin: 100px auto 0 auto;
    position: relative;
    opacity: 0;
}
.phones li{
    position: absolute;
}
.phones li.gold{
    width: 572px;
    height: 336px;
    background: url(../images/hero_gold_large.png) no-repeat;
    -webkit-transform: translate3d(-153px, 366px, 0);
    transform: translate3d(-153px, 366px, 0)
}
.phones li.silver{
    width: 520px;
    height: 404px;
    background: url(../images/hero_silver_large.png) no-repeat;
    -webkit-transform: translate3d(-56px, 260px, 0);
    transform: translate3d(-56px, 260px, 0)
}
.phones li.rosegold{
    width: 458px;
    height: 468px;
    background: url(../images/hero_rose_gold_large.png) no-repeat;
    -webkit-transform: translate3d(67px, 172px, 0);
    transform: translate3d(67px, 172px, 0)
}
.phones li.spacegrey{
    width: 371px;
    height: 496px;
    background: url(../images/hero_space_grey_large.png) no-repeat;
    -webkit-transform: translate3d(230px, 119px, 0);
    transform: translate3d(230px, 119px, 0)
}

.phones.animated{
    -webkit-transition: opacity 2s ease-out;
    transition: opacity 2s ease-out;
    opacity: 1
}
.phones.animated li{
    -webkit-transition: 2s ease-out;
    transition: 2s ease-out
}
.phones.animated li.gold{
    -webkit-transform: translate3d(-153px, 349px, 0) rotate(0.01deg);
    transform: translate3d(-153px, 349px, 0) rotate(0.01deg);
}
.phones.animated li.silver{
    -webkit-transform: translate3d(-56px, 220px, 0) rotate(0.01deg);
    transform: translate3d(-56px, 220px, 0) rotate(0.01deg)
}
.phones.animated li.rosegold{
    -webkit-transform: translate3d(67px, 92px, 0) rotate(0.01deg);
    transform: translate3d(67px, 92px, 0) rotate(0.01deg)
}
.phones.animated li.spacegrey{
    -webkit-transform: translate3d(230px, 0, 0) rotate(0.01deg);
    transform: translate3d(230px, 0, 0) rotate(0.01deg)
}